<!-- 订单列表 -->
<script setup>

// 引入通知发货弹窗组件
import NotifyShipment from '@/components/NotifyShipment.vue';
// 引入退款弹窗组件
import Refund from '@/components/Refund.vue';
import { reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  current: 0,
  list: [],
  page: 1,
  status: 'loadmore',
  showCancelModal: false,
  showCollectModal: false,
  showNotifyShipment: false,
  showRefund: false,
  bool: false
})
// 首次加载
onLoad(options => {
  data.current = options.type
  // getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  // getList()
})
// 查询充值记录列表
function getList() {
  console.log('优惠券页面', data.page)
  if (data.page >= 3) return
  data.status = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      data.list.push({
        name: '优惠券名称',
        rule: '满¥100可用',
        amount: '100.00',
        time: '2024.02.30 09:00'
      })
    }
    data.page++
    data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  }, 2000);
}
// tabs-list
const tabsList = [
  { name: '全部', id: 1 },
  { name: '待付款', id: 2 },
  { name: '待提货', id: 3 },
  { name: '待发货', id: 4 },
  { name: '待收货', id: 5 },
  { name: '待评价', id: 6 },
  { name: '售后/退款', id: 7 },
]
// tabs change
function tabsChange(item, index) {
  data.current = index
  data.list = []
  data.page = 1
  // getList()
}

// 订单状态map
const orderMap = {
  1: {
    color: '#FF9F18',
    txt: '待付款'
  },
  2: {
    color: '#333333',
    txt: '已评价'
  },

}

// 显示取消订单弹窗
function cancelOrder() {
  data.showCancelModal = true
}
// 确认取消订单
const cancelOrderConfirm = () => {
  data.showCancelModal = false
  uni.showToast({
    title: '取消成功',
    icon: 'none'
  })
}
// 显示确认收货弹窗
function collectOrder() {
  data.showCollectModal = true
}
// 订单确认收货
const collectConfirm = () => {
  data.showCollectModal = false
  uni.showToast({
    title: '取消成功',
    icon: 'none'
  })
}
// 显示通知发货
function showNotifyShipment() {
  data.showNotifyShipment = true
}
// 修改地址
function editAddress() {
  uni.navigateTo({
    url: '/subPackage/my/address/index'
  })
}
// 显示售后退款弹窗
function showRefundPopup() {
  data.showRefund = true
}
// 前往订单评价页面
function goToEvaluate() {
  uni.navigateTo({
    url: '/subPackage/my/order/evaluate'
  })
}
// 前往详情页面
function goDetail() {
  uni.navigateTo({
    url: '/subPackage/my/order/detail'
  })
} 
</script>

<template>
  <view class="order-page">
    <view class="tabs-box">
      <!-- tabs -->
      <up-tabs :list="tabsList" :current="data.current" lineWidth="50rpx" lineHeight="6rpx" lineColor="#FFC870"
        :inactiveStyle="{
          fontWeight: 400,
          fontSize: '32rpx',
          color: '#333333'
        }" :activeStyle="{
          fontWeight: 500,
          fontSize: '32rpx',
          color: '#333333'
        }" @change="tabsChange"></up-tabs>
    </view>

    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="order" text="暂无订单"></up-empty>
    <!-- 订单列表 -->
    <view v-else class="order-list">
      <view v-for="item in data.list" :key="item" class="order-item" @click="goDetail">
        <view class="head">
          <text class="order-no">334374658690785764</text>
          <text class="status">待付款</text>
        </view>
        <!-- 商品列表 -->
        <view class="commodity--list">
          <view class="commodity-item" v-for="item in (3 == 3 && !data.bool ? 3 : 5)" :key="item">
            <view class="left">
              <view class="img-box">
                <image style="width: 100rpx; height:100rpx;" src="https://cdn.uviewui.com/uview/goods/1.jpg"
                  mode="scaleToFill" />
              </view>
              <view class="info">
                <view class="name">商品名称</view>
                <view class="sku">规格：8瓶</view>
              </view>
            </view>
            <view class="right">
              <view class="price">¥200.00</view>
              <view class="num-box">
                <up-icon name="close" color="#000000" size="12"></up-icon>
                <text class="num">1</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 展示更多 -->
        <view v-if="10 > 3" class="showMore" @click="data.bool = !data.bool">
          <text>{{ !bool ? '展开' : '收起' }}</text>
          <up-icon :name="!data.bool ? 'arrow-down' : 'arrow-up'" color="#000" size="16"></up-icon>
        </view>
        <!-- 金额 -->
        <view class="amount-box">
          <text v-if="true">需付款：</text>
          <text v-if="false">实付款：</text>
          <text v-if="false">应退款：</text>
          <text v-if="false">待付款：</text>
          <text>¥800.00</text>
        </view>
        <!-- 按钮 -->
        <view class="btns-box">
          <up-button v-if="false" text="取消订单" type="primary" shape="circle" :plain="true"
            @click="cancelOrder"></up-button>
          <up-button v-if="false" text="立即支付" type="primary" shape="circle" :plain="true"></up-button>
          <up-button v-if="false" text="通知发货" type="primary" shape="circle" :plain="true"
            @click="showNotifyShipment"></up-button>
          <up-button v-if="true" text="售后\退款" type="primary" shape="circle" :plain="true"
            @click="showRefundPopup"></up-button>
          <up-button v-if="true" text="修改地址" type="primary" shape="circle" :plain="true"
            @click="editAddress"></up-button>
          <up-button v-if="false" text="确认收货" type="primary" shape="circle" :plain="true"
            @click="collectOrder"></up-button>
          <up-button v-if="true" text="立即评价" type="primary" shape="circle" :plain="true"
            @click="goToEvaluate"></up-button>
        </view>
      </view>
      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </view>
    <!-- 取消订单确认弹窗 -->
    <up-modal :show="data.showCancelModal" width="540rpx" title="提示" content='确定取消当前订单？' confirmText="取消"
      cancelText="再想想" :showCancelButton="true" cancelColor="#333333" confirmColor="#FF4D4D" :asyncClose="true"
      contentTextAlign="center" @cancel="data.showCancelModal = false" @confirm="cancelOrderConfirm"></up-modal>
    <!-- 确认收货弹窗 -->
    <up-modal :show="data.showCollectModal" width="540rpx" title="提示" content='确认收货？' confirmText="确认" cancelText="取消"
      :showCancelButton="true" cancelColor="#333333" confirmColor="#FFA618" :asyncClose="true" contentTextAlign="center"
      @cancel="data.showCollectModal = false" @confirm="collectConfirm"></up-modal>

    <!-- 提货弹窗 -->
    <NotifyShipment :show="data.showNotifyShipment" type="1" @close="data.showNotifyShipment = false" />
    <!-- 售后退款弹窗 -->
    <Refund :show="data.showRefund" @close="data.showRefund = false" />
  </view>
</template>

<style lang="scss" scoped>
.order-page {
  padding-bottom: 60rpx;
  min-height: 100vh;
  background: #F9F9F9;

  // tabs
  & .tabs-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    padding-top: 30rpx;
    width: 100vw;
    height: 118rpx;
    background: #F9F9F9;
  }

  // 空
  &::v-deep .u-empty {
    padding-top: 318rpx;
  }

  // 订单列表
  & .order-list {
    padding: 30rpx;
    margin-top: 118rpx;

    & .order-item {
      padding: 0 30rpx;
      margin-bottom: 40rpx;
      background: #FFFFFF;
      border-radius: 10rpx;

      // 头部
      & .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #F9F9F9;

        & .order-no {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }

        & .status {
          font-weight: 500;
          font-size: 26rpx;
          color: #FF9F18;
        }
      }

      // 商品列表
      & .commodity--list {

        & .commodity-item {
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          & .left {
            display: flex;

            & .img-box {
              width: 100rpx;
              height: 100rpx;
              border-radius: 10rpx;
              overflow: hidden;
            }

            & .info {
              margin-left: 20rpx;

              & .name {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
              }

              & .sku {
                margin-top: 10rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
              }
            }
          }

          & .right {

            & .price {
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
            }

            & .num-box {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              margin-top: 10rpx;
              line-height: 24rpx;

              &::v-deep .u-icon {
                margin-top: 5rpx;
              }

              & text {
                padding-left: 6rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
              }
            }
          }
        }
      }

      // 展开更多
      & .showMore {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;

        & text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }

        &::v-deep .u-icon {
          margin-left: 10rpx;
        }
      }

      // 金额
      & .amount-box {
        margin-top: 30rpx;
        padding: 20rpx 0;
        border-top: 2rpx solid #F9F9F9;
        text-align: right;

        & text {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
      }

      // 按钮
      & .btns-box {
        padding-bottom: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        &::v-deep .u-button {
          margin: 0rpx;
          margin-left: 20rpx;
          padding: 10rpx 16rpx !important;
          height: 48rpx !important;
          width: auto !important;
          line-height: 48rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FF9F18;
          border: 2rpx solid #FFC870;
        }
      }
    }
  }

  // 
}
</style>